<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>自定义指令</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<style>
			 
		</style>
	</head>
	<body>
		<div id="app">
			 <input type="text" v-model.number='num1'> <br>
			 <input type="text" v-model.number='num2'> <br>
			 <button @click='btnHandle'>计算</button>
			 <h1>{{sum}}</h1>
			 <h1>{{result}}</h1>
		</div>
		<script>
			 
			//1. 实例化一个Vue的实例
			let vm = new Vue({
				el: '#app',
				data: {
					 num1:'',
					 num2:'',
					 sum:''
				},
				methods:{
					btnHandle(){
						console.log('methods#bthHandle执行.....');
						this.sum=this.num1+this.num2;
					}
				},
				computed:{
					result:function(){
						console.log('computed#result执行.....');
						return this.num1+this.num2;
					}
				}
				 
			});
		</script>
	</body>
</html>
